<script setup>
import {useCounterStore} from '@/store/counterStore'
const myStore = useCounterStore()
const {count, doubleCount} = storeToRefs(myStore)
const { increment } =myStore
const router = useRouter()
const userinfo = ref({
    id: 1,
    username: '张三'
})
const toAbout = () => {
    router.push({
        path: '/about',
        query: {userinfo: JSON.stringify(userinfo.value)}
    })
}
const handleClickMessageBtn = () => {
  ElMessage('提示消息')
}
// composables中的state
const counter = useCounter()
const squareCounter = () => {
    counter.value = counter.value * counter.value
}
</script>

<template>
<h1>首页</h1>
    <p>{{ $myPlugin('my plugin') }}</p>

<ul>
    <li><NuxtLink to="/">首页</NuxtLink></li>
    <li><NuxtLink to="/about">关于</NuxtLink></li>
    <li><NuxtLink to="/users-index/1">用户</NuxtLink></li>
    <li><NuxtLink :to="{path: '/about', query: {userinfo: JSON.stringify(userinfo)}}">带参数跳转到about</NuxtLink></li>
</ul>
<el-button @click="toAbout">点击跳转到关于</el-button>
<el-button @click="handleClickMessageBtn">点击提示</el-button>
<hr />
<h1>count:{{ count }}</h1>
<h1>doubleCount:{{ doubleCount }}</h1>
<el-button @click="increment">count++</el-button>
<h1>useState()的counter: {{ counter }}</h1>
<el-button @click="squareCounter">平方</el-button>
</template>

<style scoped>
a {
    text-decoration: none;
    color: inherit;
}
ul {
    display: flex;
}
li {
    font-size: 16px;
    padding: 5px 10px;
    background-color: #555;
    color: #fff;
    list-style: none;
    &:hover {
        transform: scale(1.2);
        color: aquamarine;
    }
}
</style>